<template>
  <div class="addtopbox">
    <el-form
        label-position="right"
        label-width="100px"
        :model="news"
        style="max-width: 460px"
    >
      <el-form-item label="标题">
        <el-input v-model="news.ntitle" placeholder="大标题"/>
      </el-form-item>
      <el-form-item label="副标题">
        <el-input v-model="news.nsubhead" placeholder="小标题"/>
      </el-form-item>
      <el-form-item label="详细信息">
        <el-button @click="this.dialogVisible = true;this.tempVdetail = news.ndetail">点击编辑</el-button>
<!--        <QuillComp @update="getDetail" style="width: 90%;height: 300px"></QuillComp>
        <svg style="margin:0 0 auto 5px"
             t="1691805526589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="4010" width="300" height="300"
             @click="this.dialogVisible = true;this.tempVdetail = news.ndetail"
        >
          <path
              d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z"
              fill="#8a8a8a" p-id="4011"></path>
        </svg>-->

        <!--        <el-input type="textarea" :rows="5" v-model="news.ndetail" placeholder="详细信息"/>-->
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8081/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="imgUrl" :src="imgUrl" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon">
            <Plus/>
          </el-icon>
        </el-upload>
      </el-form-item>
      <div class="button">
        <el-button @click="subNews()">提交</el-button>
        <el-button @click="reset()">重置</el-button>
      </div>

    </el-form>
  </div>
  <!--文本输入框-->
  <el-dialog
      v-model="dialogVisible"
      title="输入内容"
      width="80%"
  >
    <QuillComp @update="getDetail" style="width: 100%;height: 500px"></QuillComp>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false;this.news.ndetail = tempVdetail">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import doThis from "@/api/getData";
import QuillComp from "@/util/QuillComp.vue";
import {ElMessage} from "element-plus";

export default {
  name: "AddNews",
  components: {
    QuillComp
  },
  data() {
    return {
      dialogVisible: false,
      tempVdetail: '',
      imgUrl: '',
      news: {
        ndetail: '',
        nsubhead: '',
        ntitle: '',
        nid: '',
        nimg: ''
      },
    }
  },
  methods: {
    getDetail(e) {
      this.tempVdetail = e
      console.log(e)
    },

    handleAvatarSuccess(e) {
      console.log(e.data.url)
      this.news.nimg = e.data.url
      this.imgUrl = e.data.url
    },
    subNews() {
/*      news: {
        ndetail: '',
            nsubhead: '',
            ntitle: '',
            nid: '',
            nimg: ''
      },*/
      this.$checkLogin()
      let data = new FormData()
      data.set('nsubhead',this.news.nsubhead)
      data.set('ntitle',this.news.ntitle)
      data.set('nid',this.news.nid)
      data.set('nimg',this.news.nimg)
      data.set('ndetail',this.news.ndetail)
      doThis.doPost("/news/addNewsInFront", data).then(res => {
        // alert(res.msg)
        if (res.code === "0") {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
          this.reset()
        }else {
          ElMessage.error(res.msg)
        }
      })
    },
    reset() {
      this.imgUrl = '',
      this.news = {
        ndetail: '',
        nsubhead: '',
        ntitle: '',
        nid: '',
        nimg: ''
      }
    }
  }
}
</script>

<style scoped>

.addtopbox {
  padding: 20px;
  background: #ffff;
  width: 500px;
  margin: 0 auto;
}

.button {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  border: 1px dashed var(--el-border-color);
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
}
</style>